import React, { Component } from 'react'
import { View, Text, StyleSheet, Image, TouchableNativeFeedback } from 'react-native'
import { connect } from 'react-redux'
import ProgressButton from './ProgressButton'
import MyIcon from '../utils/MyIcon'
import actionTypes from '../store/actionTypes'
import RotateView, { TestComponent } from './RotateView'

function setPlaying(playing) {
  return {
    type: actionTypes.SETPLAYING,
    payload: {
      playing
    }
  }
}

function setProgress(progress) {
  return {
    type: actionTypes.SETPROGRESS,
    payload: {
      progress
    }
  }
}

const styles = StyleSheet.create({
  wrap: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12
  },
  item: {
    paddingHorizontal: 12
  },
  album: {
    width: 38,
    height: 38,
    borderRadius: 19
  },
  title: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-start'
  },
  text: {
    fontSize: 12,
    color: '#333'
  },
  textWeak: {
    color: '#8f8f8f'
  }
})
let playTicker = null;
class PlayBar extends Component {
  startTicker() {
    let { setProgress, setPlaying } = this.props;
    playTicker && clearInterval(playTicker)
    setPlaying(true)
    playTicker = setInterval(() => {      
      let music = this.props.music;
      let progress = music.progress + 1;
      if(progress > 100){
        this.stopTicker();
        setPlaying(false)
        return false;
      }
      else{
        setProgress(progress)
      }
    }, this.props.music.length / 100 * 1000);
  }
  stopTicker() {
    let { setPlaying } = this.props;
    playTicker && clearInterval(playTicker)
    setPlaying(false)
  }
  togglePlay() {
    let { playing, progress, setProgress } = this.props;
    playing = !playing;
    if(playing && progress >= 100){
      setProgress(0)
    }
    if(playing){
      this.startTicker();
    }
    else{
      this.stopTicker();
    }
  }
  render() {
    let { music, playing, onClick } = this.props
    if(playing){
      this.startTicker()
    }
    else{
      this.stopTicker()
    }
    return (
      <View style={styles.wrap}>        
        <TouchableNativeFeedback onPress={onClick}>
          <View>
            <RotateView style={styles.item} playing={playing}>
              <Image style={{...styles.album}} source={require('../assets/bg.jpg')}/>
            </RotateView>     
          </View>
        </TouchableNativeFeedback>
        <TouchableNativeFeedback onPress={onClick}>
          <View style={styles.title}>
            <Text style={styles.text}>七夕</Text>
            <Text style={{...styles.text, ...styles.textWeak}}>横滑可以切换上下首哦</Text>
          </View>
        </TouchableNativeFeedback>
        <View style={styles.item}>
          <ProgressButton progress={music.progress} playing={playing} onClick={this.togglePlay.bind(this)}/>
        </View>
        <View style={styles.item}>
          <MyIcon name="menu" size={20} color="#333"/>
        </View>
      </View>
    )
  }
}

export default connect(
  state => {
    return {
      music: state.music,
      playing: state.playing
    }
  },
  {
    setPlaying,
    setProgress
  }
)(PlayBar)